// 通过 解构 的方式引入函数
const { src, dest, parallel, series, watch } = require('gulp')
const cleancss = require('gulp-clean-css')
const htmlmin = require('gulp-htmlmin')
const browserSync = require('browser-sync')
const bs = browserSync.create()

// 声明 gulp 任务
const style = () => {
  // 流 就是异步操作
  return src('board/css/index.css')
    .pipe(cleancss())
    .pipe(dest('dist'))
}
// 声明 页面 的构建任务
const html = () => {
  return src('board/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    }))
    .pipe(dest('dist'))
}


// 声明 服务发布 任务
const serve = () => {
  // watch(被监视的文件，对应的任务)
  watch('board/*.html', html)
  watch('board/css/index.css', style)


  // 初始化服务
  bs.init({
    notify: false,      // 禁用 浏览器 右上角的 browserSync connected 提示框
    files: 'dist/**',   // 监视 dist 下 文件的变化，然后在浏览器上实时更新
    server: {
      baseDir: './dist', // 指定服务启动的目录
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 组合任务
const build = parallel(style, html)
const dev = series(build, serve)

// 导出任务
module.exports = {
  dev
}